<script setup lang="ts">
import { nextTick, ref } from 'vue';

import TopContent from './comp/topContent.vue';
import { frame } from './runcanvas';

nextTick(() => {
  frame();
});
const intStyle = {
  position: 'relative',
  width: '100%',
  height: '100%',
};
const maxStyle = {
  position: 'fixed',
  width: '100vw',
  height: '100vh',
  top: 0,
  left: 0,
  zIndex: 9999,
};
const botenStyle = ref(intStyle);
const intButton = {
  icon: '',
  text: '全屏',
};
const maxButton = {
  icon: '',
  text: '退出全屏',
};
const buttonStyle = ref(intButton);
function toggleFullScreen() {
  if (document.fullscreenElement) {
    // 退出全屏
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
    botenStyle.value = intStyle;
    buttonStyle.value = intButton;
  } else {
    // 进入全屏
    document.documentElement.requestFullscreen();
    botenStyle.value = maxStyle;
    buttonStyle.value = maxButton;
  }
}
</script>

<template>
  <div :style="botenStyle" class="big-data">
    <div class="big-data-content"><canvas id="canvas"></canvas></div>
    <div class="bigconyer">
      <TopContent />
      <a-button type="primary" @click="toggleFullScreen">
        {{ buttonStyle.text }}
      </a-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.big-data {
  overflow: hidden;

  .big-data-content {
    position: absolute;
    width: 100%;
    height: 100%;

    #canvas {
      width: 100%;
      height: 100%;
    }
  }

  .bigconyer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #fff;
  }
}
</style>
